import React from 'react';
import echarts from 'echarts';
import BreadcrumbCustom from '../../BreadcrumbCustom';
import { Row, Col, Form, Input, DatePicker, Button, Tabs, Table, Select, message, Spin } from 'antd';
import { getClassifiesAll } from '../../../Server/SystemManger';
import moment from 'moment';
import qs from 'qs';
import axios from 'axios';
import * as Request from '../../../Server/Statistics';
import * as Constant from '../../../common/const';
import * as Utils from '../../../common/utils';
import Echarts from './Echarts';
require('../sysinfo/sysinfo.css');
require('../../systemManager/customer.css');

const FormItem = Form.Item;
const { MonthPicker } = DatePicker;
const TabPane = Tabs.TabPane;
const dateFormat = 'YYYY-MM';
const titleDateFmt = 'YYYY年MM月';
let sysCompany = {};//当前人所在分部信息
let flag = true;
let partState = false;
let dailyDefaultQuery = {
    queryMonth: moment(new Date()).format(dateFormat),
};
const Option = Select.Option;

class InstallInfo extends React.Component {
    constructor(props) {
        super(props);
        sysCompany = JSON.parse(localStorage.getItem('user')).sysCompany;//当前人所在分部信息
        flag = Utils.objectIsNull(sysCompany);
        partState = flag && sysCompany.id == 1;
        flag && (dailyDefaultQuery = {
            ...dailyDefaultQuery, startIp: sysCompany.startIp,
            endIp: sysCompany.endIp
        });
        this.state = {
            commonOption: {
                toolbox: {
                    show: true,
                    right: '9.4%',
                    feature: {
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                color: ['#53ADFB', '#f36993'],
                tooltip: {
                    trigger: 'axis'
                },
            },
            optionAll: {},
            optionDiff: {},
            date: undefined,
            activeKey: '1',
            currentCompany: flag && sysCompany.name,
            dataSource: [],
            resultData: [], //安装结果数据
            partNameData: [],
            startIp: flag && sysCompany.startIp, //分部管理起始ip
            endIp: flag && sysCompany.endIp, //分部管理结束ip
            sumLoading: false, //总部loading
            partLoading: false, //分部loading
            sumMaxData: '', //总部数据最大值
            partMaxData: '' //分部数据最大值
        }
    }

    componentWillMount() {
        if(flag){
            this.fetchData();
            this.getPartName();
        }

    }

    componentWillUnmount() {
        this.setState = (state, callback) => {
            return;
        };
    }

    fetchData = (params = dailyDefaultQuery) => {
        this.setState({
            sumLoading: true
        })
        Request.currentInstallDaily(qs.stringify(params)).then(res => {
            if (res && Constant.REQUEST_SUCCESS == res.code) {
                const result = this.dealResponseData(res.data.points);
                const seriesName = ['安装量'];
                const option = this.getOption(`安装信息(${moment(params.queryMonth).format(titleDateFmt)})`, '日期', '安装量', result[0], [result[1]], seriesName);
                const sumMaxData = Math.max(...result[1]);
                option.tooltip = {
                    trigger: 'axis',
                    formatter: `${moment(params.queryMonth).format('YYYY年MM月')}{b}日<br/>{a}:{c}`
                };
                option.legend = {
                    selectedMode: false,
                    data: seriesName,
                    align:'left',
                    top: 30,
                };
                this.setState({ optionAll: option, dataSource: res.data.points, sumLoading: false, sumMaxData });
            } else {
                this.setState({ sumLoading: false})
                res && res.code !== Constant.REQUEST_UNAUTHORIZED && message.error(res.msg)
            }
        });
    }
    //分别查询安装成功 安装失败的数据
    fetchDiffData = (params = dailyDefaultQuery) => {
        const _this = this;
        _this.setState({
            partLoading: true
        })
        //安装成功
        params = { ...params, install: 1 };
        const getSuccessData = Request.currentInstallDaily(qs.stringify(params));
        //安装失败
        params = { ...params, install: 0 };
        const getFailData = Request.currentInstallDaily(qs.stringify(params));
        axios.all([getSuccessData, getFailData]).then(axios.spread(function (successData, failData) {
            const successResult = _this.dealResponseData(successData.data.points);
            const failResult = _this.dealResponseData(failData.data.points);
            const yData = [successResult[1], failResult[1]];
            const resultMax1 = Math.max(...successResult[1]);
            const resultMax2 = Math.max(...failResult[1]);
            let partMaxData = resultMax1 > resultMax2 ? resultMax1: resultMax2;
            let resultData = [];
            for(let i = 0; i < successResult[1].length; i++){
                resultData.push({
                    success: successResult[1][i], 
                    x: successData.data.points[i].x,
                    false: failResult[1][i]
                });
            }
            const seriesName = ['安装成功', '安装失败'];
            const option = _this.getOption(`安装结果(${moment(params.queryMonth).format(titleDateFmt)})`, '日期', '安装量', successResult[0], yData, seriesName);
            option.tooltip = {
                trigger: 'axis',
                formatter: `${moment(params.queryMonth).format('YYYY年MM月')}{b}日<br />{a0} : {c0}<br />{a1} : {c1}<br />`
            };
            option.legend = {
                selectedMode: false,
                data: seriesName,
                align:'left',
                top: 30,
            };
            _this.setState({ optionDiff: option, partLoading: false, resultData: resultData, partMaxData });
        }));
    }
    dealResponseData = (data = []) => {
        let xData = [], yData = [];
        data.map(item => {
            xData.push(item.x.substring(item.x.length - 2, item.x.length));
            yData.push(item.y)
        });
        return [xData, yData];
    }
    getOption = (title, xName, yName, xData, yData, seriesName) => {
        let result = [];
        let maxArray = []; 
        const colorList = [
            ['#4fc9e7','#61B1F8','#61B1F8'],
            ['#e18dcf','#f36993','#f36993'],
            ['#fcd868','#f99982','#f99982']
        ]
        for (let i = 0; i < yData.length; i++) {
            let itemMax = Math.max(...yData[i]);
            maxArray.push(itemMax);
            result.push({
                name: seriesName[i],
                data: yData[i],
                smooth: true,
                type: 'line',
                symbolSize: 8,
                // barWidth: Constant.STATISTIC_BAR_WIDTH,
                // barGap:'-100%',
                // barCategoryGap:'40%',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: colorList[i][0]},
                                {offset: 1, color: colorList[i][1]},
                                {offset: 1, color: colorList[i][2]}
                            ]
                        ),
                    }
                },
                lineStyle: {
                    width: Constant.STATISTIC_LINE_WIDTH,
                }
            })
        }
        let maxValue = Utils.GetMaxValue(maxArray);
        return {
            title: {
                text: title,
                left: 'center',
            },
            xAxis: {
                name: xName,
                type: 'category',
                boundaryGap: true, //图形两边留白, false则不留白
                data: xData,
                axisLabel: Constant.AXIS_LABEL,
                axisTick: {
                    // alignWithLabel: true, //留白后让刻度轴在标签名下
                }
            },
            yAxis: {
                name: yName,
                type: 'value',
                minInterval: 1,
                interval: Utils.GetInterval(maxValue),
                max: (value)=> {
                    return maxValue;
                    // return Math.ceil(value.max*1.2);
                },
                axisLabel: {
                    showMaxLabel: true
                },
                nameTextStyle: {
                    padding: [0, 0, 15, 0]
                },
                splitLine:{
                    lineStyle:{
                        type:'dashed'
                    }
                }
            },
            series: result,
            dataZoom : Constant.dataZoom(yData)
        };
    }
    search = (e) => {
        const _this = this;
        e.preventDefault();
        const { startIp, endIp } = this.state;
        this.props.form.validateFields((err, values) => {
            if (!err) {
                values.queryMonth = moment(values.queryMonth).format('YYYY-MM');
                values.startIp = values.startIp ? values.startIp : startIp;
                values.endIp = values.endIp ? values.endIp : endIp;
                if (_this.state.activeKey == '1') {
                    _this.fetchData(values);
                } else {
                    _this.fetchDiffData(values);
                }

            }
        });
    }
    onChange = (date, dateString) => {
        this.setState({
            date: dateString
        });
    }
    reset = (activeKey) => {
        if (typeof activeKey == 'object') {
            activeKey = this.state.activeKey;
        }
        const resetValues = {
            distNum: undefined,
            version: undefined,
            sn: undefined,
            queryMonth: moment(dailyDefaultQuery.queryMonth, dateFormat),
            startIp: partState?"":dailyDefaultQuery.startIp,
            endIp: partState?"":dailyDefaultQuery.endIp,
        }
        this.props.form.setFieldsValue({ ...resetValues });
        '1' == activeKey ? this.fetchData() : this.fetchDiffData();
    }
    changeTab = (activeKey) => {
        this.setState({ activeKey });
        this.reset(activeKey);
    }

    //导出方法
    export = (data, headers, title, column, maxData) => {
        let _data = [];
        for (let i = 0; i < data.length; i++) {
            let temp = {};
            for(let j = 0; j < headers.length; j++){
                temp[headers[j]] = data[i][column[j]];
            }
            _data.push(temp);
        }
        Utils.outPutExcel(headers, _data, title, maxData);
    }

    //禁止时间
    disabledDate = (current) => {
        // Can not select days before today and today
        return current.valueOf() > Date.now();
    }

    //获取分部名数据
    getPartName = () => {
        getClassifiesAll().then(res => {
            if (res && res.code == Constant.REQUEST_SUCCESS) {
                const data = res.data
                this.setState({
                    partNameData: data,
                });
            } else {
                res && res.code !== Constant.REQUEST_UNAUTHORIZED && message.error(res.msg);
            }
        });
    }

    //分部名选择事件
    partNameSelect = (value, option) => {
        this.props.form.setFieldsValue({ startIp: '', endIp: '' });
        this.setState({
            startIp: option.props.startIp,
            endIp: option.props.endIp
        })
    }

    //校验起始ip
    checkStartIP = (rule, value, callback) => {
        let { startIp, endIp } = this.state;
        if (value == '' || value == undefined) {
            if (sysCompany.id == 1) {
                callback();
                return;
            } else {
                callback('请输入起始IP地址！');
                return;
            }
        }
        if (!Utils.checkIP(value)) {
            callback('请输入正确地IP地址！');
            return;
        } else if (!Utils.checkIPValue(value, startIp, endIp)) {
            callback('请输入分部范围内的IP地址！');
            return;
        } else if (!Utils.checkIPCount(this.props.form.getFieldValue("startIp"), this.props.form.getFieldValue("endIp"))) {
            callback('起始IP不能大于结束IP');
            return;
        }
        if(this.props.form.getFieldValue('endIp') && this.props.form.getFieldError('endIp')){
            this.props.form.validateFields(['endIp'],{ force: true });
        }
        callback();
    }

    //校验结束ip
    checkEndIP = (rule, value, callback) => {
        let { startIp, endIp } = this.state;
        if (value == '' || value == undefined) {
            if (sysCompany.id == 1) {
                callback();
                return;
            } else {
                callback('请输入结束IP地址！');
                return;
            }
        }
        if (!Utils.checkIP(value)) {
            callback('请输入正确地IP地址！');
            return;
        } else if (!Utils.checkIPValue(value, startIp, endIp)) {
            callback('请输入分部范围内的IP地址！');
            return;
        } else if (!Utils.checkIPCount(this.props.form.getFieldValue("startIp"), this.props.form.getFieldValue("endIp"))) {
            callback('结束IP不能小于起始IP');
            return;
        }
        if(this.props.form.getFieldValue('startIp') && this.props.form.getFieldError('startIp')){
            this.props.form.validateFields(['startIp'],{ force: true });
        }
        callback();
    }

    validateSn = (rule, value, callback) =>{
        if(Utils.CheckSnFunc(value)){
            callback('序列号存在非法字符,请重新输入');
            return ;
        }
        callback();
        return;
    }

    validateVersion = (rule, value, callback) =>{
        if(Utils.CheckSnFunc(value)){
            callback('版本号存在非法字符,请重新输入');
            return ;
        }
        callback();
        return;
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { partNameData, sumLoading, partLoading, sumMaxData, partMaxData } = this.state;
        const partNameOptions = partNameData.map(d => <Option value={d.id} endIp={d.endIp} startIp={d.startIp} >{d.name}</Option>);

        const columns = [
            {
                title: '日期',
                dataIndex: 'x',
                align: 'center',
                width: '60%',
                render: (text) => moment(text).format('YYYY-MM-DD')
            },
            {
                title: '安装量',
                dataIndex: 'y',
                align: 'center',
                width: '40%'
            },
        ];

        const resultColumns = [
            {
                title: '日期',
                dataIndex: 'x',
                align: 'center',
                width: '30%',
                render: (text) => moment(text).format('YYYY-MM-DD')
            },{
                title: '安装成功',
                dataIndex: 'success',
                align: 'center',
                width: '35%'
            },{
                title: '安装失败',
                dataIndex: 'false',
                align: 'center',
                width: '35%'
            },
        ];

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 24 },
                md: 10,
                lg: 7
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 24 },
                md: 14,
                lg: 17
            },
        };

        const buttonSpan = {
            xs: 24,
            sm: 7,
            md: 6,
            xl: 3
        }

        const formRow = <Form onSubmit={this.search}>
            <Row>
                <Col span={6}>
                    <FormItem
                        {...formItemLayout}
                        label="通道号"
                    >
                        {getFieldDecorator('distNum')(
                            <Input maxLength={255}/>
                        )}
                    </FormItem>
                </Col>
                <Col span={6}>
                    <FormItem
                        {...formItemLayout}
                        label="新版本号"
                    >
                        {getFieldDecorator('version',{
                            rules: [{
                                validator: this.validateVersion
                            }],
                        })(
                            <Input maxLength={250}/>
                        )}
                    </FormItem>
                </Col>
                <Col span={6}>
                    <FormItem
                        {...formItemLayout}
                        label="序列号"
                    >
                        {getFieldDecorator('sn',{
                            rules: [{
                                validator: this.validateSn
                            }],
                        })(
                            <Input maxLength={250}/>
                        )}
                    </FormItem>
                </Col>
                <Col span={6}>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="IP"
                        >
                            {getFieldDecorator('startIp', {
                                rules: [{
                                    validator: this.checkStartIP,
                                }],
                                initialValue: partState?"":dailyDefaultQuery.startIp,
                            })(
                                <Input maxLength={255}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={2} style={{ textAlign: 'center' }}>
                        <FormItem>
                            <label>-</label>
                        </FormItem>
                    </Col>
                    <Col span={10}>
                        <FormItem
                            wrapperCol={{
                                xs: { span: 24 },
                                sm: { span: 20 },
                            }}
                        >
                            {getFieldDecorator('endIp', {
                                rules: [{
                                    validator: this.checkEndIP,
                                }],
                                initialValue: partState?"":dailyDefaultQuery.endIp
                            })(
                                <Input maxLength={255}/>
                            )}
                        </FormItem>
                    </Col>
                </Col>
            </Row>
            <Row>
                <Col span={6}>
                    <FormItem
                        {...formItemLayout}
                        label="旧版本号"
                    >
                        {getFieldDecorator('preVersion')(
                            <Input maxLength={255}/>
                        )}
                    </FormItem>
                </Col>
                {flag && partState && sysCompany.id == 1 && <Col span={6}>
                    <FormItem
                        {...formItemLayout}
                        label="分部名"
                    >
                        {getFieldDecorator('partName',{
                            initialValue: sysCompany.id
                        })(
                            <Select
                                showSearch
                                style={{ width: '100%' }}
                                optionFilterProp="children"
                                onSelect={this.partNameSelect}
                                filterOption={true}
                            >
                                {partNameOptions}
                            </Select>
                        )}
                    </FormItem>
                </Col>}
                <Col span={6}>
                    <FormItem
                        {...formItemLayout}
                        label="时间"
                    >
                        {getFieldDecorator('queryMonth', {
                            initialValue: moment(dailyDefaultQuery.queryMonth, dateFormat)
                        })(
                            <MonthPicker
                                disabledDate={this.disabledDate}
                                style={{ width: '100%' }}
                                format={'YYYY-MM'}
                                allowClear={false}
                            />
                        )}
                    </FormItem>
                </Col>
                <Col {...buttonSpan} className='install-button-margin' style={{zIndex: 1}}>
                    <FormItem>
                        <Button type="primary" htmlType="submit">查询</Button>
                        <Button type="default" onClick={this.reset} >重置</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>

        return (
            <div>
                <Row>
                    <BreadcrumbCustom first={'安装信息'} />
                </Row>
                {flag && <Row>
                    <Tabs activeKey={this.state.activeKey} type={'card'} onChange={this.changeTab}>
                        <TabPane tab={'安装量'} key={'1'}>
                        <Spin spinning={sumLoading} >
                            <Row>
                                <Form onSubmit={this.search}>
                                    <Row>
                                        <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="通道号"
                                            >
                                                {getFieldDecorator('distNum')(
                                                    <Input maxLength={255}/>
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="新版本号"
                                            >
                                                {getFieldDecorator('version',{
                                                    rules: [{
                                                        validator: this.validateVersion
                                                    }],
                                                })(
                                                    <Input maxLength={250}/>
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="序列号"
                                            >
                                                {getFieldDecorator('sn',{
                                                    rules: [{
                                                        validator: this.validateSn
                                                    }],
                                                })(
                                                    <Input maxLength={250}/>
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col span={6}>
                                            <Col span={12}>
                                                <FormItem
                                                    {...formItemLayout}
                                                    label="IP"
                                                >
                                                    {getFieldDecorator('startIp', {
                                                        rules: [{
                                                            validator: this.checkStartIP,
                                                        }],
                                                        initialValue: partState?"":dailyDefaultQuery.startIp,
                                                    })(
                                                        <Input maxLength={255}/>
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={2} style={{ textAlign: 'center' }}>
                                                <FormItem>
                                                    <label>-</label>
                                                </FormItem>
                                            </Col>
                                            <Col span={10}>
                                                <FormItem
                                                    wrapperCol={{
                                                        xs: { span: 24 },
                                                        sm: { span: 20 },
                                                    }}
                                                >
                                                    {getFieldDecorator('endIp', {
                                                        rules: [{
                                                            validator: this.checkEndIP,
                                                        }],
                                                        initialValue: partState?"":dailyDefaultQuery.endIp
                                                    })(
                                                        <Input maxLength={255}/>
                                                    )}
                                                </FormItem>
                                            </Col>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="旧版本号"
                                            >
                                                {getFieldDecorator('preVersion')(
                                                    <Input maxLength={255}/>
                                                )}
                                            </FormItem>
                                        </Col>
                                        {flag && partState && sysCompany.id == 1 && <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="分部名"
                                            >
                                                {getFieldDecorator('partName',{
                                                    initialValue: sysCompany.id
                                                })(
                                                    <Select
                                                        showSearch
                                                        style={{ width: '100%' }}
                                                        optionFilterProp="children"
                                                        onSelect={this.partNameSelect}
                                                        filterOption={true}
                                                    >
                                                        {partNameOptions}
                                                    </Select>
                                                )}
                                            </FormItem>
                                        </Col>}
                                        <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="时间"
                                            >
                                                {getFieldDecorator('queryMonth', {
                                                    initialValue: moment(dailyDefaultQuery.queryMonth, dateFormat)
                                                })(
                                                    <MonthPicker
                                                        disabledDate={this.disabledDate}
                                                        style={{ width: '100%' }}
                                                        format={'YYYY-MM'}
                                                        allowClear={false}
                                                    />
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col {...buttonSpan} className='install-button-margin' style={{zIndex: 1}}>
                                            <FormItem>
                                                <Button type="primary" htmlType="submit">查询</Button>
                                                <Button type="default" onClick={this.reset} >重置</Button>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </Form>
                                <Row>
                                    <Col span={19} style={{ paddingTop: 30 }}>
                                        <Echarts option={this.state.optionAll }/>
                                    </Col>
                                    <Col span={5} style={{ paddingRight: '1.7%'}}>
                                        <Row type="flex" justify="end" className='output-button'>
                                            <Button
                                                size='large'
                                                style={{ fontSize: 14 }}
                                                onClick={this.export.bind(this, this.state.dataSource, ['日期', '安装量'], '安装信息', ['x', 'y'], sumMaxData)}
                                            >导出列表</Button>
                                        </Row>
                                        <Table 
                                            className='output-table'
                                            dataSource={this.state.dataSource}
                                            columns={columns}
                                            scroll={{ y: 600 }}
                                            pagination={false}
                                            rowKey={record => record.x}
                                        />
                                    </Col>
                                </Row>
                            </Row>
                        </Spin>
                        </TabPane>
                        <TabPane tab={'安装结果'} key={'2'}>
                        <Spin spinning={partLoading} >
                            <Row>
                                <Form onSubmit={this.search}>
                                    <Row>
                                        <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="通道号"
                                            >
                                                {getFieldDecorator('distNum')(
                                                    <Input maxLength={255}/>
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="新版本号"
                                            >
                                                {getFieldDecorator('version',{
                                                    rules: [{
                                                        validator: this.validateVersion
                                                    }],
                                                })(
                                                    <Input maxLength={250}/>
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="序列号"
                                            >
                                                {getFieldDecorator('sn',{
                                                    rules: [{
                                                        validator: this.validateSn
                                                    }],
                                                })(
                                                    <Input maxLength={250}/>
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col span={6}>
                                            <Col span={12}>
                                                <FormItem
                                                    {...formItemLayout}
                                                    label="IP"
                                                >
                                                    {getFieldDecorator('startIp', {
                                                        rules: [{
                                                            validator: this.checkStartIP,
                                                        }],
                                                        initialValue: partState?"":dailyDefaultQuery.startIp,
                                                    })(
                                                        <Input maxLength={255}/>
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={2} style={{ textAlign: 'center' }}>
                                                <FormItem>
                                                    <label>-</label>
                                                </FormItem>
                                            </Col>
                                            <Col span={10}>
                                                <FormItem
                                                    wrapperCol={{
                                                        xs: { span: 24 },
                                                        sm: { span: 20 },
                                                    }}
                                                >
                                                    {getFieldDecorator('endIp', {
                                                        rules: [{
                                                            validator: this.checkEndIP,
                                                        }],
                                                        initialValue: partState?"":dailyDefaultQuery.endIp
                                                    })(
                                                        <Input maxLength={255}/>
                                                    )}
                                                </FormItem>
                                            </Col>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="旧版本号"
                                            >
                                                {getFieldDecorator('preVersion')(
                                                    <Input maxLength={255}/>
                                                )}
                                            </FormItem>
                                        </Col>
                                        {flag && partState && sysCompany.id == 1 && <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="分部名"
                                            >
                                                {getFieldDecorator('partName',{
                                                    initialValue: sysCompany.id
                                                })(
                                                    <Select
                                                        showSearch
                                                        style={{ width: '100%' }}
                                                        optionFilterProp="children"
                                                        onSelect={this.partNameSelect}
                                                        filterOption={true}
                                                    >
                                                        {partNameOptions}
                                                    </Select>
                                                )}
                                            </FormItem>
                                        </Col>}
                                        <Col span={6}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="时间"
                                            >
                                                {getFieldDecorator('queryMonth', {
                                                    initialValue: moment(dailyDefaultQuery.queryMonth, dateFormat)
                                                })(
                                                    <MonthPicker
                                                        disabledDate={this.disabledDate}
                                                        style={{ width: '100%' }}
                                                        format={'YYYY-MM'}
                                                        allowClear={false}
                                                    />
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col {...buttonSpan} className='install-button-margin' style={{zIndex: 1}}>
                                            <FormItem>
                                                <Button type="primary" htmlType="submit">查询</Button>
                                                <Button type="default" onClick={this.reset} >重置</Button>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </Form>
                                <Row>
                                    <Col span={19} style={{ paddingTop: 30 }}>
                                        <Echarts option={this.state.optionDiff }/>
                                    </Col>
                                    <Col span={5} style={{ paddingRight: '1.7%'}}>
                                        <Row type="flex" justify="end" className='output-button'>
                                            <Button
                                                size='large'
                                                style={{fontSize: 14}}
                                                onClick={this.export.bind(this, this.state.resultData, ['日期', '安装成功', '安装失败'], '安装结果', ['x', 'success', 'false'], partMaxData )}
                                            >导出列表</Button>
                                        </Row>
                                        <Table 
                                            className='output-table'
                                            dataSource={this.state.resultData}
                                            columns={resultColumns}
                                            scroll={{ y: 600 }}
                                            pagination={false}
                                            rowKey={record => record.x}
                                        />
                                    </Col>
                                </Row>
                            </Row>
                        </Spin>
                        </TabPane>
                    </Tabs>
                </Row>}
                {!flag && <div>{Constant.STATISTICS_NO_PERMISSION}</div>}
            </div>
        );
    }
}

const InstallInfoForm = Form.create()(InstallInfo);
export default InstallInfoForm;